var de = [],
    i = 0;

var Index = {
    _isInit: false,
    data : [],
    checkId : "",


    // 过滤条件
    FilterParams: {

    },

    // 渲染数据
    RenderData: {
        isStart: false,
        // 表格数据
        TbDate: {
            isInit: false,
            maxLen: 5,
            data: []
        },
        // 旋转木马数据
        carouseData: {
            data: []
        }
    },



    // 初始化
    init: function () {

        var that = this;
        var data = [];
        data.push({id:1,fullname:'获取数据'});
        data.push({id:2,fullname:'推送数据'});
        data.push({id:3,fullname:'执行Sql'});
        data.push({id:4,fullname:'抽取数据'});
        data.push({id:5,fullname:'全部消息'});
        var d;
        var t = [];
        t.push("全部消息");
        // $.ajax({
        //
        //     type:'post',
        //     url:'/websocket/getSafetyChartData',//  /nc_dev_manage_index/chuntest
        //     async:false,
        //     success:function (res) {
        //
        //         d = JSON.parse(res.data);
        //         $.each(d, function (index,item) {
        //             item.fullname = index;
        //             data.push(item);
        //         });
        //
        //     }
        //
        // });
        // $.each(data, function (index,item) {
        //     if(item.fullname == '安徽总部'){
        //         t.push(item);
        //     }
        // });

        var timer = setTimeout(function(){
            clearTimeout(timer);
            that.diffW();

            //$("#ltChart").height($chartBox.height()-80).width($chartBox.width());

            // 旋转木马
            that.initCarousel(data);

            // 初始化图表
            that.initChart(t,data);

            // 初始化表格数据
            that.initTbData();

            // 选中的六角球
            that.hexagonBall();

            // 背景星空
            // that.initStarBg2()
        },0);


    },

    //计算
    diffW:function(){

        var $chartBox = $("#app .chartContent .leftBar .leftTopChart"),
            h = $chartBox.height(),
            w = $chartBox.width(),
            titleTop = 0.07,
            textHeight = 20,
            titleBottom = 0.05,
            bTitle = 0.2;

        var cH =h -  (h*(titleTop + titleBottom + bTitle)),
            cw = w - w *0.07;

        $("#ltChart,#lmChart,#lbChart").height(cH).width(cw);


        var $rgb = $("#app .chartContent .rightCharts .rBg:first"),
            rh = $rgb.height(),
            rw = $rgb.width();

        cw = rw - rw *0.13;
        cH = rh - rh * .34 ;
        $("#rtChart").height(cH).width(cw);

        $rgb = $("#app .chartContent .rightCharts .rBg:last"),
            rh = $rgb.height(),
            rw = $rgb.width();

        cH = rh - rh * .22 - 20;
        $("#rbChart").height(cH);


        var bw = $("body").width();

        if(bw!=1366){
            var f = bw/1366,
                lt = 228/f,
                mt =((246*f) - 246) /2+"px";


            $("#app .chartContent .middleInfo .lampHolder").css("top",lt);
            $("#app .chartContent .middleInfo .figureBox .earthCity").css({
                transform:"scale("+f+")",
                marginTop:mt

            });
        }


    },

    // 启动
    start: function () {

        // 对弈小于1680缩放
        //this.pageScale()

        // this.FullScreen()

        this.initEvent()

        if (!this.RenderData.isStart) {
            $('#app .chartContent .middleInfo .carousel .carouselFigure').removeClass('animateCarousel')
        }

        Date.prototype.Format = function (fmt) { // author: meizz
            var o = {
                'M+': this.getMonth() + 1, // 月份
                'd+': this.getDate(), // 日
                'h+': this.getHours(), // 小时
                'm+': this.getMinutes(), // 分
                's+': this.getSeconds(), // 秒
                'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
                'S': this.getMilliseconds() // 毫秒
            }
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
            for (var k in o)
                if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
            return fmt
        }
    },

    // 测试事件
    initEvent: function () {
        var that = this;

        $('#shower').on('click', function () {

            that.animatePage();
        });

        $('#exiter').on('click', function () {
            that.hidePage()
        });

        $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function (event) {
            var wf = document.fullscreenElement
                || document.webkitFullscreenElement
                || document.mozFullscreenElement
                || document.msFullscreenElement

            if (wf) {
                if (!that.RenderData.isStart) {
                    that.animatePage()
                }
            }else {
                that.hidePage()
            }
        })
    },

    // 显示
    animatePage: function () {

        $('#container').show();
        // 受否初始化
        if (!this._isInit) {
            this.init()
        }

        $('#shower').hide();

        $('#app .chartContent .middleInfo .carousel .carouselFigure').addClass('animateCarousel');
        this.RenderData.isStart = true;
        // 必须用户点击
        this.FullScreen()
    },

    // 隐藏
    hidePage: function () {
        this.RenderData.isStart = false;
        $('#app .chartContent .middleInfo .carousel .carouselFigure').removeClass('animateCarousel');
        $('#shower').show();
        $('#container').hide();
        // 必须用户点击
        this.exitScreen()
    },

    // 初始化图表
    initChart: function (data,rbdata) {
        // this.webSocket();
        // 左上
        this.getLeftTopChartData(data);

        // 左中
        this.getLeftMiddleData(data);

        // 坐下
        this.getLeftBottomData(data);

        // 右上
        this.getRightTopChartData(data);

        // 右下

        // this.getRightBottomData(rbdata);
    },

    webSocket:function(){

    },

    // 初始化表格数据

    initTbData: function (data) {

        // " <td class='col col-1'><span title='"+item.deptName+"'>"+ item.deptName + "</span></td>" +
        // " <td class='col col-2'><span title='"+item.warningType+"'>"+ item.devName  + "</td>" +
        // " <td class='col col-3'><span title='"+item.ip+"'>"+ item.ip + "</span></td>" +
        // " <td class='col col-4'> <span title='"+item.time+"'>"+ item.warningType + "</span></td>" +
        // " <td class='col col-5'><span title='"+item.devName+"'>"+ item.time+ "</span></td>" +
        // ' <td class="col col-6"><span title="'+item.msg+'">' + item.msg + '</span></td>' +

        var d = [];
        for(var i = 0; i < 10; i++ ){
            d.push({deptName:"部门"+i,warningType:i,ip:"ip"+i,time:"time"+i,devName:"devName"+i,msg:"msg"+i});
        }
        data = d;

        if(data != null && data != ""){
            this.RenderData.TbDate.data = data;

            this.renderTbData();

        }



        // if(i<5){
        //     de.push(data);
        //
        //     this.RenderData.TbDate.data = de;
        //     this.renderTbData();
        //     i++;
        // }else{
        //      var a = [];
        //      a.push(data);
        //     // this.RenderData.TbDate.data.push(data);
        //      this.intervalLoopData(a);
        // }

    },

    // 渲染表格数据
    renderTbData: function () {

        // this.RenderData.TbDate

        var TbDate = this.RenderData.TbDate,
            len = TbDate.maxLen,
            data = TbDate.data,
            dataLen = data.length,
            tr = '';

        if (dataLen < len) {
            len = dataLen
        }

        for (var i = 0;i < len;i++) {
            tr += this.renderTbDataItem(data[i])
        }

        var $tbody = $('#app .chartContent .middleInfo .dataBox .tbData .tbody');

        $tbody.html(tr);

        $tbody.find('tr').fadeIn();

        data.splice(0, len);

        if (!TbDate.isInit) {
            TbDate.isInit = true;
            this.intervalLoopData()
        }
    },

    // 渲染数据元素
    renderTbDataItem: function (item) {
        return "<tr class='col-1'>" +
            " <td class='col col-1'><span title='"+item.deptName+"'>"+ item.deptName + "</span></td>" +
            " <td class='col col-2'><span title='"+item.warningType+"'>"+ item.devName  + "</td>" +
            " <td class='col col-3'><span title='"+item.ip+"'>"+ item.ip + "</span></td>" +
            " <td class='col col-4'> <span title='"+item.time+"'>"+ item.warningType + "</span></td>" +
            " <td class='col col-5'><span title='"+item.devName+"'>"+ item.time+ "</span></td>" +
            ' <td class="col col-6"><span title="'+item.msg+'">' + item.msg + '</span></td>' +
            '</tr>'
    },

    // 轮训数据
    intervalLoopData: function (item) {
        var that = this;

        setInterval(function () {

            if (!that.RenderData.isStart) {
                return
            }

            if(that.RenderData.TbDate.data.length<=0){
                return;
            }


            var data = that.RenderData.TbDate.data,
                _tr = that.renderTbDataItem(data[0]),
                // _t = that.renderTbDataItem(item[0]),
                $tbody = $('#app .chartContent .middleInfo .dataBox .tbData .tbody');

            $tbody.find('tr:first').fadeOut(function () {
                $(this).remove();
                $tbody.find('tr:last').fadeIn()
            });

            $tbody.append(_tr);
            // $tbody.append(_t);
            data.push(data[0]);
            data.splice(0, 1);
        }, Config.intervalLoop)
    },

    // 获取左上图表数据
    getLeftTopChartData: function (data) {

        // var d = data[0].WS_EVENT_DEVICEID_COUNT;
        // var keys = Object.keys(d);
        // var ydata = keys.map(function (value) {
        //     return d[value];
        // });
        var obj = {
            title: 'ABC',
            bTitle: 'efg',
            data: {
                XData: ["接口1","接口2","接口3","接口4","接口5"],
                YData: [12,3,243,56,57]
            }
        };

        // var obj = {data:{}};
        // obj.data.YData = []
        // obj.data.XData = []
        // for (var i = 0;i < 7;i++) {
        //     obj.data.YData.push(this.getRandom())
        //     obj.data.XData.push(new Date().Format('mm:ss'))
        // }
        // obj.data.YData.push(100)
        // obj.data.XData.push("类型1");
        this.renderLeftTopChart(obj)
    },

    // 随机数
    getRandom: function () {
        return Math.floor(Math.random() * 100 + 1)
    },

    // 渲染左上图表
    renderLeftTopChart: function (data) {
        var dom = document.getElementById('ltChart'),
            myChart = echarts.init(dom),
            Options = Config.Charts.LeftTop,
            $leftTopChart = $('.chartContent .leftTopChart');

        // $leftTopChart.find('.title .cityName').text(data.title)
        // $leftTopChart.find('.title .watchType').text(data.title)

        // $leftTopChart.find('.bTitle .bCityName').text(data.bTitle)
        // $leftTopChart.find('.bTitle .bWatchType').text(data.bTitle)
        // $leftTopChart.find('.bTitle .bWatchValue').text(data.bTitle)

        if(data.data.XData==null||data.data.YData==null){
            Options.series[0].data = [0,0,0,0,0];
            Options.xAxis.data = [0,0,0,0,0]
        }else {
            Options.series[0].data = data.data.YData;
            Options.xAxis.data = data.data.XData;
        }

        myChart.setOption(Options, true);
    },

    // 获取左中图表数据
    getLeftMiddleData: function (data) {

        // var d = data[0].WS_EVENT_EVENTID_COUNT;
        // var keys = Object.keys(d);
        // var ydata = keys.map(function (value) {
        //     return d[value];
        // });
        //
        //
        // var obj = {
        //     title: '1232',
        //     bTitle: '456',
        //     data: {
        //         XData: keys,
        //         YData: ydata
        //     }
        // };

        var obj = {data:{}};
        obj.data.YData = []
        obj.data.XData = []
        for (var i = 0;i < 7;i++) {
            obj.data.YData.push(this.getRandom())
            obj.data.XData.push(new Date().Format('mm:ss'))
        }

        this.renderLeftMiddleChart(obj)
    },

    // 渲染左中图表
    renderLeftMiddleChart: function (data) {
        var dom = document.getElementById('lmChart'),
            myChart = echarts.init(dom),
            Options = Config.Charts.LeftMiddle,
            $leftTopChart = $('.chartContent .leftMiddleChart')

        // $leftTopChart.find('.title .cityName').text(data.title)
        // $leftTopChart.find('.title .watchType').text(data.title)

        // $leftTopChart.find('.bTitle .bCityName').text(data.bTitle)
        // $leftTopChart.find('.bTitle .bWatchType').text(data.bTitle)
        // $leftTopChart.find('.bTitle .bWatchValue').text(data.bTitle)

        if(data.data.XData==null||data.data.YData==null){
            Options.series[0].data = [0,0,0,0,0];
            Options.xAxis.data = [0,0,0,0,0]
        }else {
            Options.series[0].data = data.data.YData;
            Options.xAxis.data = data.data.XData;
        }

        myChart.setOption(Options, true)
    },

    // 获取左下图表数据
    getLeftBottomData: function (data) {

        // var d = data[0].WS_WARING_TYPE_COUNT;
        // var keys = Object.keys(d);
        // var ydata = keys.map(function (value) {
        //     return d[value];
        // });
        //
        //
        // var obj = {
        //     title: '1232',
        //     bTitle: '456',
        //     data: {
        //         XData: keys,
        //         YData: ydata
        //     }
        // };

        var obj = {data:{}};
        obj.data.YData = []
        obj.data.XData = []
        for (var i = 0;i < 7;i++) {
            obj.data.YData.push(this.getRandom())
            obj.data.XData.push(new Date().Format('mm:ss'))
        }

        this.renderLeftBottomChart(obj)
    },

    // 渲染左下图表
    renderLeftBottomChart: function (data) {
        var dom = document.getElementById('lbChart'),
            myChart = echarts.init(dom),
            Options = Config.Charts.LeftBottom,
            $leftTopChart = $('.chartContent .leftBottomChart')

        // $leftTopChart.find('.title .cityName').text(data.title)
        // $leftTopChart.find('.title .watchType').text(data.title)

        // $leftTopChart.find('.bTitle .bCityName').text(data.bTitle)
        // $leftTopChart.find('.bTitle .bWatchType').text(data.bTitle)
        // $leftTopChart.find('.bTitle .bWatchValue').text(data.bTitle)
        if(data.data.XData==null||data.data.YData==null){
            Options.series[0].data = [0,0,0,0,0];
            Options.xAxis.data = [0,0,0,0,0]
        }else {
            Options.series[0].data = data.data.YData;
            Options.xAxis.data = data.data.XData;
        }


        myChart.setOption(Options, true)
    },

    // 获取右上图表数据
    getRightTopChartData: function (data) {

        // var d = data[0].WS_EVENT_LOG_PRIORITY_COUNT;
        // var keys = Object.keys(d);
        // var ydata = keys.map(function (value) {
        //     return d[value];
        // });
        //
        //
        // var obj = {
        //     title: '1232',
        //     bTitle: '456',
        //     data: {
        //         XData: keys,
        //         YData: ydata
        //     }
        // }

        var obj = {data:{}};
        obj.data.YData = []
        obj.data.XData = []
        for (var i = 0;i < 7;i++) {
            obj.data.YData.push(this.getRandom())
            obj.data.XData.push(new Date().Format('mm:ss'))
        }

        this.renderRightTopChart(obj)
    },
    // 渲染右上图表
    renderRightTopChart: function (data) {
        var dom = document.getElementById('rtChart'),
            myChart = echarts.init(dom),
            Options = Config.Charts.RightTop,
            $leftTopChart = $('.chartContent .rightTopChart')

        // $leftTopChart.find('.title .cityName').text(data.title)
        // $leftTopChart.find('.title .watchType').text(data.title)

        Options.series[0].data = data.data.YData;
        Options.yAxis.data = data.data.XData;

        myChart.setOption(Options, true);

    },

    // 获取右下图表数据
    getRightBottomData: function (d) {

        var keyTexts = [];
        var data = {
            title: 'rrr',
            bTitle: 'eee',
            data: []
        };

        var colorList = [
            '#29AAE3','#64BD3D','#EFE42A','#EE9201',
            '#B74AE5','#0AAF9F','#E89589','#16A085',
            '#4A235A','#C39BD3 ','#F9E79F','#BA4A00',
            '#ECF0F1','#616A6B','#EAF2F8','#4A235A',
            '#3498DB','#B5C334','#FCCE10','#E87C25',
            '#27727B','#FE8463','#FAD860','#F0805A',
            '#F3A43B','#60C0DD','#D7504B','#26C0C0',
            '#C6E579','#F4E001'
        ];

        var i = 0;
        $.each(d, function (index,item) {
            if(item.fullname == '安徽总部'){

            }else{
                keyTexts.push(item.fullname);
                // var sum = Object.keys(item.WS_WARING_TYPE_COUNT).map(function (key) {
                //
                //     return item.WS_WARING_TYPE_COUNT[key];
                // });
                var sum = 1;
                var value = 0;
                $.each(sum, function (index,item) {
                    value += item;
                });
                data.data.push({
                    value: value,
                    name: item.fullname,
                    itemStyle:{ color: colorList[i] }
                });
                i++;
            }

        });





        this.renderRightBottomChart(data)
    },

    // 渲染右下图表
    renderRightBottomChart: function (data) {
        var dom = document.getElementById('rbChart'),
            myChart = echarts.init(dom),
            Options = Config.Charts.RightBottom,
            $leftTopChart = $('.chartContent .rightBottomChart');

        // $leftTopChart.find('.title .cityName').text(data.title)
        // $leftTopChart.find('.title .watchType').text(data.title)

        Options.series[0].data = data.data;

        myChart.setOption(Options, true)
    },

    // 初始化星空
    initStarBg: function () {

        // 屏幕的尺寸
        var screenW = document.documentElement.clientWidth * 2;
        var screenH = document.documentElement.clientHeight;

        var $div = $('<div/>')
        // 2. 动态创建多个星星
        for (var i = 0; i < 150; i++) {
            var $star = $('<span class="star" />')
            // 位置随机
            var x = parseInt(Math.random() * screenW)
            var y = parseInt(Math.random() * screenH)
            // 大小随机
            var scale = Math.random() * 1
            // 频率随机
            var rate = Math.random() * 1.5
            $star.css({
                left: x + 'px',
                top: y + 'px',
                transform: 'scale(' + scale + ', ' + scale + ')',
                animationDelay: rate + 's'
            })
            $div.append($star)
        }

        $('#starBg').append($div.children())
    },

    // 初始化星空
    initStarBg2: function () {

        var canvas = document.getElementById('starBgCanvas'),
            ctx = canvas.getContext('2d'),
            w = canvas.width,
            h = canvas.height,

            hue = 127, // 星星颜色
            stars = [],
            count = 0,
            maxStars = 130; // 星星数量
        ctx.fillStyle = 'rgba(255, 255, 255, 0)'


        var startSize = [];

        for(var i=0;i<6;i++){
            startSize.push(90);
        }

        for(var i=0;i<10;i++){
            startSize.push(50);
        }

        for(var i=0;i<20;i++){
            startSize.push(40);
        }

        for(var i=0;i<70;i++){
            startSize.push(30);
        }

        var canvas2 = document.createElement('canvas'),
            ctx2 = canvas2.getContext('2d')
        canvas2.width = 100
        canvas2.height = 100
        var image = document.getElementById('imgStart');
        ctx2.drawImage(image,0,0,40,40);



        // this.drawNStart(ctx2, {
        //   "num": 4,//多少角星
        //   "R": 10,//中心到顶点距离
        //   "r": 4,//中心到凹点距离
        //   "x": 0,//左上角X坐标
        //   "y": 0,//左上角Y坐标
        //   "rot": 45// 旋转角度
        // }, {
        //     "fs": "#1e4879",//填充色 内容
        //     "lj": "round",//接头圆滑
        //     "ss": "#F5E322",//填充色线
        //     "lw": 2,//线宽
        //     "b": false,//有边线
        //     "f": true,//有填充
        // });

        // var half = canvas2.width / 2,
        //   gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half)
        // gradient2.addColorStop(0.025, '#CCC')
        // // gradient2.addColorStop(0.025, 'hsl(' + hue + ', 1%, 3%)')
        // gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)')
        // gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)')
        // gradient2.addColorStop(1, 'transparent')

        // ctx2.fillStyle = gradient2
        // ctx2.beginPath()
        // ctx2.arc(half, half, half, 0, Math.PI * 2)
        // // ctx2.rect(0,0,w,h)
        // ctx2.fill()

        // End cache

        function random (min, max) {
            if (arguments.length < 2) {
                max = min
                min = 0
            }

            if (min > max) {
                var hold = max
                max = min
                min = hold
            }

            return Math.floor(Math.random() * (max - min + 1)) + min
        }

        function maxOrbit (x, y) {
            var max = Math.max(x, y),
                diameter = Math.round(Math.sqrt(max * max + max * max))
            return diameter / 2
            // 星星移动范围，值越大范围越小，
        }

        var Star = function () {
            this.orbitRadius = random(maxOrbit(w, h))

            var size =startSize.shift();

            size = size ||20;

            this.radius = size
            // 星星大小
            this.orbitX = w / 2
            this.orbitY = h / 2
            // 星星移动速度
            this.timePassed = random(0, maxStars)
            this.speed = random(this.orbitRadius) / 50000

            this.alpha = random(2, 10) / 10

            this.x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX
            this.y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY

            count++
            stars[count] = this
        }

        Star.prototype.draw = function () {

            ctx.globalAlpha = .7

            var newX = this.x += 1

            if (newX > w) {
                newX -= w
            }

            ctx.drawImage(canvas2, newX, this.y, this.radius, this.radius)

            this.x = newX

            this.timePassed += this.speed
        }

        var k = 0

        for (var i = 0; i < maxStars; i++) {
            new Star()
        }

        function animation () {
            if (k > 10) {
                return
            }
            // k++

            ctx.globalCompositeOperation = 'source-over'
            ctx.globalAlpha = 0.5; // 尾巴
            // ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)'
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.fillRect(0, 0, w, h)

            ctx.globalCompositeOperation = 'lighter'

            for (var i = 1, l = stars.length; i < l; i++) {
                stars[i].draw()
            }

            //window.requestAnimationFrame(animation)
        }

        this.setIntervalStartBg && clearInterval(this.setIntervalStartBg);
        this.setIntervalStartBg = setInterval(function(){
            animation()
        }, 100);


    },

    setIntervalStartBg:false,

    // 星星
    drawNStart: function (ctx, infoJson, configJson) {
        var num, R, r, x, y, rot
        num = infoJson['num']
        R = infoJson['R']
        r = infoJson['r']
        x = infoJson['x']
        y = infoJson['y']
        rot = infoJson['rot']

        ctx.beginPath()

        var border = configJson['lw']
        for (var i = 0; i < num; i++) {
            var perDeg = 360 / num
            var degA = perDeg / 2 / 2
            var degB = 360 / (num - 1) / 2 - degA / 2 + degA
            ctx.lineTo(Math.cos((degA + perDeg * i - rot) / 180 * Math.PI) * R + x + border + R * Math.cos(degA / 180 * Math.PI),
                -Math.sin((degA + perDeg * i - rot) / 180 * Math.PI) * R + y + border + R)
            ctx.lineTo(Math.cos((degB + perDeg * i - rot) / 180 * Math.PI) * r + x + border + R * Math.cos(degA / 180 * Math.PI),
                -Math.sin((degB + perDeg * i - rot) / 180 * Math.PI) * r + y + border + R)
        }

        ctx.closePath(); // 会封闭图形

        ctx.lineWidth = configJson['lw']
        ctx.strokeStyle = configJson['ss']

        var half = 100;
        // var gradient2 = ctx.createRadialGradient(half, half, 0, half, half, half)
        // gradient2.addColorStop(0.025, '#000')
        // // gradient2.addColorStop(0.025, 'hsl(' + hue + ', 1%, 3%)')
        // //gradient2.addColorStop(0.1, '')
        // gradient2.addColorStop(0.25, '#fff')
        // gradient2.addColorStop(1, 'transparent')

        var grd=ctx.createRadialGradient(75,50,5,90,60,100);
        grd.addColorStop(0,"red");
        grd.addColorStop(1,"white");

        ctx.fillStyle = grd

        //ctx.fillStyle = configJson['fs']
        ctx.lineJoin = configJson['lj']
        ctx.lineCap = configJson['lc']

        if (configJson['f']) {
            ctx.fill()
        }
        if (configJson['b']) {
            ctx.stroke(); // 绘制
        }
    },

    // 初始化旋转木马
    initCarousel: function (data) {
        this.carouselRender(data)
    },

    // 渲染旋转木马
    carouselRender: function (data) {
        // var data=[];
        // console.log("data111==="+JSON.stringify(data));
        // var a = [{fullname:'1'},{fullname:'2'}];
        this.RenderData.carouseData.data = data;

        this.carouselRenderItem();

        this.initcarouselEvent()
    },

    // 渲染元素
    carouselRenderItem: function (cIndex) {
        var newData = this.RenderData.carouseData.data,
            $div = $('<div />'),
            count = newData.length

        if (cIndex) {
            var spliceCount = count - cIndex,
                spliceData = newData.splice(cIndex, spliceCount)

            newData = spliceData.concat(newData)
        }

        for (var i = 0; i < count; i++) {
            var className = ''
            if (i > 1 && count - i > 2) {
                className = 'rotateY'
            }

            // console.log("newData[i].id="+newData[i]);
            var tpl = '<div class="item" name=\''+ newData[i].id +'\'><div class="selBg"></div> <div class="info ' + className + '"><div class="bCirecle">  ' +
                '<div class="cName" id='+newData[i].fullname+'>' + newData[i].fullname+ '</div> <div class="cValue"></div>  </div></div></div>'
            $div.append(tpl)
        }

        $('#app .middleInfo .carouselFigure').html($div.children())

        if (cIndex != undefined) {
            $('#app .middleInfo .carouselFigure .item').eq(0).addClass('selected')
        }

        this.carouselAnimate();

        this.RenderData.carouseData.data = newData

        // var timer = setTimeout(function(){
        //   clearTimeout(timer)
        //   $('#app .middleInfo .carouselFigure .item').eq(2).find(".info").addClass('rotateY')
        // },1000)
    },

    // 事件
    initcarouselEvent: function () {
        var $carouselFigure = $carouselFigure = $('#app .middleInfo .carousel .carouselFigure'),
            itemCount = this.RenderData.carouseData.data.length,
            timer = false,
            cDate = false,
            dmm = Config.carouselStopDate,
            theta = 2 * Math.PI / itemCount,
            nextTs = 50/itemCount *1000,
            nDate = +new Date() - 200,
            cIndex = 0,
            that = this;

        $carouselFigure.mouseenter(function () {
            $carouselFigure.addClass("paused");
        }).mouseleave(function () {
            $carouselFigure.removeClass("paused");
        });

        $('#app .middleInfo .carouselFigure').on('click', '.item', function (i) {
            // 这一块逻辑有问题
            // console.log($(i).attr("name"));// 获取不到deptId
            // console.log($(i)[0].currentTarget.attributes.getNamedItem("name").nodeValue);// ......我觉得取到的方式？？？ ......
            console.log("我点到了");
            console.log(i);
            var sum = [];
            var name = i.target.innerText.replace(/[\r\n]/g,"");
            $.each(that.RenderData.carouseData.data,function (index,item) {
                if(item.fullname == name){
                    sum.push(item);
                }
            });

            // console.log(that.RenderData.carouseData.data[i]);
            that.initChart(sum,that.RenderData.carouseData.data);//that.RenderData.carouseData.data[i]
            // 初始化表格数据
            // that.initTbData(sum);
            sum = [];

            cDate = +new Date()
            nDate = false

            var $this = $(this),
                index = $this.index(),
                rotateY = 6.28 - theta * index,
                oTransform = $carouselFigure.css('transform'),
                cIndex = index;

            $carouselFigure.removeClass('animateCarousel').css('transform', oTransform)

            if (timer) {
                return
            }

            timer = setTimeout(function () {
                clearTimeout(timer);

                timer = false;

                $carouselFigure.css('transform', 'rotateX(-12deg) rotateY(' + rotateY + 'rad)');

                var timerCanvas = setTimeout(function () {
                    clearTimeout(timerCanvas);
                    $('#hexagonBallCanvas').show();
                    $this.find('.bCirecle');

                    that.carouselRenderItem(cIndex);

                    $carouselFigure.removeClass('transition');

                    $carouselFigure.css('transform', 'rotateX(-12deg) rotateY(0rad)');

                    var timerTrans = setTimeout(function () {
                        clearTimeout(timerTrans);
                        $carouselFigure.addClass('transition')
                    }, 500)
                }, 500)
            }, 100)
        });

        setInterval(function () {
            if (!that.RenderData.isStart) {
                return
            }
            // 运动
            if (cDate && (+new Date()) - cDate > dmm) {
                cIndex = 0
                $carouselFigure.addClass('animateCarousel').removeClass('paused');
                $('#hexagonBallCanvas').hide();
                $carouselFigure.find('.selected').removeClass('selected');
                cDate = false;
                nDate = + new Date()
            }

            // 暂停
            if (nDate && (+new Date()) - nDate > nextTs) {
                ++cIndex;


                $carouselFigure.removeClass('animateCarousel').css('transform', 'rotateX(-12deg) rotateY(0rad)');
                var ind = $carouselFigure[0].firstChild.innerText.replace(/[\r\n]/g,"");
                var rInde = itemCount - cIndex;
                var ar = [];
                // $.each(that.RenderData.carouseData.data, function (index,item) {
                //     if(item.fullname == ind){
                //         ar.push(item);
                //     }
                // });
                // ar.push(that.RenderData.carouseData.data[]);

                ar.push(that.RenderData.carouseData.data[rInde]);
                that.initChart(ar,that.RenderData.carouseData.data);
                that.carouselRenderItem(rInde);

                // 初始化表格数据
                // that.initTbData(ar);

                $('#hexagonBallCanvas').show();
                nDate = false;
                cDate = + new Date()
            }
        }, 2000)
    },

    // 旋转地球
    carouselAnimate: function () {

        var
            maxLen = 10,
            $carouse = $('#app .middleInfo .carousel'),
            $figure = $carouse.find('.carouselFigure'),
            $figureEls = $figure.find('.item'),
            n =maxLen,// $figureEls.length,
            itemCount =  $figureEls.length,
            gap = $carouse.data('gap') || 0,
            theta = 2 * Math.PI / n,
            s = 284, // parseFloat(getComputedStyle($figureEls[0]).width),
            apothem = s / (2 * Math.tan(Math.PI / n)),
            fbl = maxLen /$figureEls.length,
            theta= theta * fbl;

        $figure.css({
            transformOrigin: `50% 50% ${- apothem}px`
        })

        for (var i = 0; i < itemCount; i++) {
            $figureEls.eq(i).css({
                paddingLeft: `${gap-45}px`,
                paddingRight: `${gap}px`,
                transformOrigin: `50% 50% ${- apothem}px`,
                transform: `rotateY(${i * theta}rad) `
            })
        }

        // $figure transform:`rotateY(${imageIndex * -theta}rad)`

    },

    // 六边形的球
    hexagonBall: function () {
        // renderer 渲染器
        var renderer = new THREE.WebGLRenderer({
            alpha: true,
            canvas: document.getElementById('hexagonBallCanvas') // 绑定canvas
        })
        // renderer.setClearColor('transparent') // black

        // scene 场景
        var scene = new THREE.Scene(); // 实例化场景

        // camera 照相机
        var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000); // 透视投影相机参数设置
        camera.position.set(0, 0, 5); // 相机位置设置
        scene.add(camera); // 添加到场景

        var material = new THREE.MeshBasicMaterial({
            color: Config.selectBallBg,
            wireframe: true
        })

        var cube = new THREE.Mesh(new THREE.SphereGeometry(2, 8, 8), material);
        scene.add(cube)

        function renderAn () {
            renderer.render(scene, camera);
            cube.rotation.x += 0.003;
            cube.rotation.y += 0.003;
            // cube.rotation.z += 0.1
            requestAnimationFrame(renderAn)
        }
        renderAn();

        // render 渲染
        renderer.render(scene, camera)
    },

    // 页面缩放
    pageScale: function () {
        function diffScale () {
            $('body').removeAttr('style');
            var w = $('body').width();
            if (w < 1515) {
                var scale = (w / 1936).toFixed(2);
                $('#containerContent').css('transform', 'scale(' + scale + ')')
            }else {
                $('#containerContent').removeAttr('style')
            }
        }

        diffScale();

        $(window).on('resize', function () {
            diffScale()
        })
    },

    // 全屏
    FullScreen: function (el) {
        var el = document.getElementById('container');
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen
        if (typeof rfs != 'undefined' && rfs) {
            rfs.call(el)
        }else if (typeof window.ActiveXObject !== 'undefined') { // for Internet Explorer
            var wscript = new ActiveXObject('WScript.Shell');
            if (wscript !== null) {
                wscript.SendKeys('{F11}')
            }
        }
    },

    // 退出全屏
    exitScreen: function () {
        var el = document;

        try {
            // 判断各种浏览器，找到正确的方法
            var exitMethod = el.webkitCancelFullScreen || el.exitFullscreen || // W3C
                el.mozCancelFullScreen ||
                el.msExitFullscreen
            if (exitMethod) {
                exitMethod.call(el)
            } else if (typeof window.ActiveXObject !== 'undefined') { // for Internet Explorer
                var wscript = new ActiveXObject('WScript.Shell');
                if (wscript !== null) {
                    wscript.SendKeys('{F11}')
                }
            }
        } catch(e) {}
    }

}

Index.start();
